<template>
  <router-view></router-view>
  <div v-show="showTabbar">
    <van-tabbar
      fixed
      placeholder
      v-model="active"
      active-color="#2c2c2c"
      inactive-color="#8a8a8a"
      class="tabbar"
    >
      <van-tabbar-item to="/home" :class="{ active: isActive('/home') }">
        <span>首页</span>
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use
              :xlink:href="
                isActive('/home') ? '#icon-shouye-heise' : '#icon-shouye-huise'
              "
            ></use>
          </svg>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/welfare" :class="{ active: isActive('/welfare') }">
        <span>福利</span>
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use
              :xlink:href="
                isActive('/welfare') ? '#icon-fuli-heise' : '#icon-fuli-huise'
              "
            ></use>
          </svg>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/customerservice" :class="{ active: isActive('/customerservice') }">
        <span>客服</span>
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use
              :xlink:href="
                isActive('/customerservice') ? '#icon-kefu-heise' : '#icon-kefu-huise'
              "
            ></use>
          </svg>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/my" :class="{ active: isActive('/my') }">
        <span>我的</span>
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use
              :xlink:href="
                isActive('/my') ? '#icon-wode-heise' : '#icon-wode-huise'
              "
            ></use>
          </svg>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
  
<script setup>
import { ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();

// 获取当前路由
const route = useRoute();
const active = ref(0);

// 根据当前路由确定是否激活
const isActive = computed(() => (path) => route.path === path);

// 条件渲染tabbar
const showTabbar = computed(() => {
  const allowedRoutes = ["/home", "/welfare", "/customerservice", "/my"];
  return allowedRoutes.includes(route.path);
});
</script>
  
  <style lang="scss" scoped>
.icon {
  width:  1.2em;
  height: 1.2em;
}
.tabbar{
    --van-tabbar-item-font-size:1em
}

</style>
  